<template>
  <div class="demo">
    <div class="demo-title">时间类控件</div>
    <div class="demo-content">
      <Form
        :model="formState"
        name="time_related_controls"
        v-bind="formItemLayout"
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
        <Form.Item name="date-picker" label="DatePicker" v-bind="config">
          <DatePicker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
        </Form.Item>
        <Form.Item name="date-time-picker" label="DatePicker[showTime]" v-bind="config">
          <DatePicker
            v-model:value="formState['date-time-picker']"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </Form.Item>
        <Form.Item name="month-picker" label="MonthPicker" v-bind="config">
          <DatePicker
            v-model:value="formState['month-picker']"
            value-format="YYYY-MM"
            picker="month"
          />
        </Form.Item>
        <Form.Item name="range-picker" label="RangePicker" v-bind="rangeConfig">
          <DatePicker.RangePicker
            v-model:value="formState['range-picker']"
            value-format="YYYY-MM-DD"
          />
        </Form.Item>
        <Form.Item name="range-time-picker" label="RangePicker[showTime]" v-bind="rangeConfig">
          <DatePicker.RangePicker
            v-model:value="formState['range-time-picker']"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </Form.Item>
        <Form.Item name="time-picker" label="TimePicker" v-bind="config">
          <TimePicker
            v-model:value="formState['time-picker']"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          />
        </Form.Item>
        <Form.Item
          :wrapper-col="{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 8 },
          }"
        >
          <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Button from '@sscd/button';
  import DatePicker from '@sscd/date-picker';
  import TimePicker from '@sscd/time-picker';
  import Form from '@sscd/form';
  interface FormState {
    'date-picker': string;
    'date-time-picker': string;
    'month-picker': string;
    'range-picker': [string, string];
    'range-time-picker': [string, string];
    'time-picker': string;
  }
  const formItemLayout = {
    labelCol: { xs: { span: 24 }, sm: { span: 8 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
  };
  const config = {
    rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
  };
  const rangeConfig = {
    rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
  };
  const formState = reactive({} as FormState);
  const onFinish = (values: any) => {
    console.log('Success:', values, formState);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>
